import React, {Component} from 'react';
import FilterTitle from "../FilterTitle/FilterTitle";
import FilterPicker from "../FilterPicker/FilterPicker";
import FilterMore from "../FilterMore/FilterMore";
import styles from './index.module.css'
import Strick from "../Strick/Strick";
import {require} from "../../../../netWork";
/*标题高亮*/
const titleselectedStatus = {
    area: false,
    mode: false,
    price: false,
    more: false
}
//FilterPicker和FilterMore组件选中值
const selectedValues = {
    area: ['area', 'null'],
    mode: ['null'],
    price: ['null'],
    more: []
}

class Filter extends Component {
    state = {
        titleselectedStatus,
        //决定是否展示filter Picker,还有将来的more组件
        openType: null,
        //后台数据
        filterData: null,
        //FilterPicker和FilterMore组件选中值
        selectedValues
    };
    //点击的时哪一项 让哪一项高亮
    titleClick = (type) => {
        const {titleselectedStatus, selectedValues} = this.state;
        const newTitleSelectStatus = {...titleselectedStatus};
        Object.keys(titleselectedStatus).forEach(item => {
            if (item === type) {
                newTitleSelectStatus[type] = true;
                return
            }
            const selectVal = selectedValues[item];
            if (item === 'area' && selectVal.length !== 2) {
                newTitleSelectStatus[item] = true
            } else if (item === 'mode' && selectVal[0] !== 'null') {
                newTitleSelectStatus[item] = true
            } else if (item === 'price' && selectVal[0] !== 'null') {
                newTitleSelectStatus[item] = true
            } else if (item === 'more' && selectVal.length !== 0) {
                newTitleSelectStatus[item] = true
            } else {
                newTitleSelectStatus[item] = false
            }
        });
        this.setState({
            openType: type,
            titleselectedStatus: newTitleSelectStatus
        });
        this.setState(prevState => {
            return {
                titleselectedStatus: {
                    ...prevState.titleselectedStatus,
                    [type]: true
                },
                openType: type
            }
        })
    };

    //点击取消，不展示filterPicker
    onCancle = (type) => {
        this.setState({
            openType: null
        })
    };

    //点击确定，隐藏filter Picker
    onSave = (type, value) => {
        //获取最新的选中值，获取筛选后的城市
        const newSelectedValues = {
            ...this.state.selectedValues,
            [type]: value
        };
        // console.log(newSelectedValues);
        //筛选区域
        const {area, mode, price, more} = newSelectedValues;
        let filter = {};
        let areaKey = area[0];
        let areaValue = null;
        if (area.length === 3) {
            areaValue = area[2] !== null ? area[2] : area[1]
        }
        filter[areaKey] = areaValue;
        //方式和租金
        filter.mode = mode[0];
        filter.price = price[0];

        //获取更多筛选值

        filter.more = more.join(',');


        //传递给父组件 请求后台数据
        this.props.onFilter(filter)
        const selectVal = value;
        const {titleselectedStatus} = this.state;
        const newTitleSelectStatus = {...titleselectedStatus};

        if (type === 'area' && (selectVal.length !== 2 || selectedValues[0] !== 'area')) {
            newTitleSelectStatus[type] = true
        } else if (type === 'mode' && selectVal[0] !== 'null') {
            newTitleSelectStatus[type] = true
        } else if (type === 'price' && selectVal[0] !== 'null') {
            newTitleSelectStatus[type] = true
        } else if (type === 'more' && selectVal.length !== 0) {
            newTitleSelectStatus[type] = true
        } else {
            newTitleSelectStatus[type] = false
        }

        // console.log(value);
        this.setState({
            titleselectedStatus: newTitleSelectStatus,
            openType: null,
            selectedValues: {
                ...this.state.selectedValues,
                [type]: value
            }
        })

    };

    //获取数据
    async getFilterData() {
        const {value} = JSON.parse(localStorage.getItem('hkzf'));
        await require({
            url: '/houses/condition',
            data: {id: value}
        }).then(res => {
            this.setState({
                filterData: res.body
            })
        })
    }

    //渲染filter Picker
    renderFilterPicker = () => {
        const {openType} = this.state;
        if (openType !== 'area' && openType !== 'price' && openType !== 'mode') {
            return null
        } else {
            const {filterData: {area, subway, price, rentType}, selectedValues} = this.state;
            let data = [];
            let cols = 3;
            let defaultValue = selectedValues[openType]
            switch (openType) {
                case 'area':
                    data = [area, subway];
                    cols = 3;
                    break;
                case 'price':
                    data = price;
                    cols = 1;
                    break;
                case 'mode':
                    data = rentType;
                    cols = 1;
                    break;
                default:
                    break
            }
            return <FilterPicker
                key={openType}
                onCancle={this.onCancle}
                onSave={this.onSave} data={data}
                cols={cols}
                type={openType}
                defaultValue={defaultValue}/>
        }


    };

    //渲染fileterMore
    renderFilterMore = () => {
        const {filterData, openType, selectedValues} = this.state;
        if (openType === 'more') {
            const {roomType, oriented, floor, characteristic} = filterData;
            const data = {roomType, oriented, floor, characteristic};
            // console.log(data);
            const defaultMore = selectedValues.more;
            // console.log(defaultMore);
            return <FilterMore data={data} onSave={this.onSave} type={openType} defaultMore={defaultMore}
                               onCancle={this.onCancle}/>
        } else {
            return null
        }

    }

    componentDidMount() {
        this.getFilterData()
    }

    render() {
        const {titleselectedStatus, openType} = this.state;
        return (
            <div className={styles.root}>
                {/*遮罩层*/}
                <div className={openType === 'price' || openType === 'mode' || openType === 'area' ? styles.mask : ''}/>
                <div className={styles.content}>
                    <Strick><FilterTitle titleselectedStatus={titleselectedStatus} onClick={this.titleClick}/></Strick>
                    {/*根据条件渲染filter Picker*/}
                    {this.renderFilterPicker()}

                    {this.renderFilterMore()}

                </div>
            </div>
        );
    }
}

export default Filter;
